<template>
  <div id="out">
    <section id="BlogBBSHeader" class="hero py-2">
      <div
        id="carouselExampleIndicators"
        class="carousel slide"
        data-ride="carousel"
      >
        <ol class="carousel-indicators">
          <li
            data-target="#carouselExampleIndicators"
            data-slide-to="0"
            class="active"
          ></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <div class="hero-center">
              <div class="container">
                <div class="row align-items-center">
                  <!-- HERO TEXT -->
                  <div class="col-lg-6">
                    <div class="hero-txt">
                      <div>
                        <h5 class="hotBBSTitle">
                          <span>本周最新话题</span>
                        </h5>
                        <!-- Title -->
                        <h1 class="hotBBSName font-weight-bold">
                          生活小厨之粥
                        </h1>
                        <h5 class="hotBBSTitle">
                          <span>相 关 标 签 </span>
                          <span class="btn hotBBSTap">玉米粉</span>
                        </h5>
                        <!-- Text -->

                        <h5 class="hotBBSContent pt-3">
                          首先需要准备一杯米和一杯玉米粉,将米洗干净，将玉米粉和水勾芡,将米倒入锅中，在锅中倒入半锅水···
                        </h5>
                      </div>
                      <!-- Buttons -->
                      <div class="hero-btns clearfix">
                        <a href="javascript:;" class="btn float-left">
                          <span>了解更多</span>
                        </a>
                      </div>
                    </div>
                  </div>
                  <!-- END HERO TEXT -->

                  <!-- HERO IMAGE -->
                  <div class="col-lg-6">
                    <div class="hero-img">
                      <img
                        class="img-fluid"
                        src="../../assets/img/hero-04.png"
                        alt="hero-image"
                      />
                    </div>
                  </div>
                </div>
                <!-- End row -->
              </div>
              <!-- End container -->
            </div>
          </div>
          <div class="carousel-item">
            <div class="hero-center">
              <div class="container">
                <div class="row align-items-center">
                  <!-- HERO TEXT -->
                  <div class="col-lg-6">
                    <div class="hero-txt">
                      <div>
                        <h5 class="hotBBSTitle">
                          <span>BEST POPULAR ARTICLE OF THE WEEK</span>
                        </h5>
                        <!-- Title -->
                        <h1 class="hotBBSName font-weight-bold">
                          Lorem ipsum dolor sit amet.
                        </h1>
                        <h5 class="hotBBSTitle">
                          <span>相 关 标 签 </span>
                          <span class="btn hotBBSTap">中医</span>
                        </h5>
                        <!-- Text -->

                        <h5 class="hotBBSContent pt-3">
                          Lorem ipsum dolor sit amet consectetur adipisicing
                          elit. Possimus facere nihil officia enim aliquid quis
                          error in voluptate nulla rem.
                        </h5>
                      </div>
                      <!-- Buttons -->
                      <div class="hero-btns">
                        <a href="javascript:;" class="btn">
                          <span>了解更多</span>
                        </a>
                      </div>
                    </div>
                  </div>
                  <!-- END HERO TEXT -->

                  <!-- HERO IMAGE -->
                  <div class="col-lg-6">
                    <div class="hero-img">
                      <img
                        class="img-fluid"
                        src="../../assets/img/hero-04.png"
                        alt="hero-image"
                      />
                    </div>
                  </div>
                </div>
                <!-- End row -->
              </div>
              <!-- End container -->
            </div>
          </div>
          <div class="carousel-item">
            <div class="hero-center">
              <div class="container">
                <div class="row align-items-center">
                  <!-- HERO TEXT -->
                  <div class="col-lg-6">
                    <div class="hero-txt">
                      <div>
                        <h5 class="hotBBSTitle">
                          <span>BEST POPULAR ARTICLE OF THE WEEK</span>
                        </h5>
                        <!-- Title -->
                        <h1 class="hotBBSName font-weight-bold">
                          Lorem ipsum dolor sit amet.
                        </h1>
                        <h5 class="hotBBSTitle">
                          <span>相 关 标 签 </span>
                          <span class="btn hotBBSTap">中医</span>
                        </h5>
                        <!-- Text -->

                        <h5 class="hotBBSContent pt-3">
                          Lorem ipsum dolor sit amet consectetur adipisicing
                          elit. Possimus facere nihil officia enim aliquid quis
                          error in voluptate nulla rem.
                        </h5>
                      </div>
                      <!-- Buttons -->
                      <div class="hero-btns">
                        <a href="javascript:;" class="btn">
                          <span>了解更多</span>
                        </a>
                      </div>
                    </div>
                  </div>
                  <!-- END HERO TEXT -->

                  <!-- HERO IMAGE -->
                  <div class="col-lg-6">
                    <div class="hero-img">
                      <img
                        class="img-fluid"
                        src="../../assets/img/hero-04.png"
                        alt="hero-image"
                      />
                    </div>
                  </div>
                </div>
                <!-- End row -->
              </div>
              <!-- End container -->
            </div>
          </div>
        </div>
        <button
          class="carousel-control-prev"
          type="button"
          data-target="#carouselExampleIndicators"
          data-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </button>
        <button
          class="carousel-control-next"
          type="button"
          data-target="#carouselExampleIndicators"
          data-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </button>
      </div>

      <!-- END HERO-CENTER -->
    </section>
    <!-- END HERO -->

    <section id="blogBBSBody" class="blog-page continue py-3">
      <div class="row">
        <aside class="col-lg-8">
          <section id="blogBBSList" class="continue py-3">
            <div class="row">
              <div
                v-for="(p, index) in 6"
                :key="index"
                id="blogBBSCard"
                class="col-lg-12 col-md-6 mt-3"
              >
                <a href="javascript:;">
                  <div class="continue">
                    <div class="row rounded">
                      <!-- <div class="blogBBSCard-image col-4 my-auto">
                        <img
                          src="../../assets/img/blog/blog-img-01.jpg"
                          alt="/"
                          class="rounded"
                        />
                      </div> -->

                      <div
                        class="
                          blogBBSCard-info
                          col-lg-12
                          rounded-bottom
                          text-left
                          py-3
                        "
                      >
                        <div class="blogBBSCard-title">3冬季性生活保健守则</div>
                        <h5 class="blogBBSCard-tap">
                          <span>相关标签 </span>
                          <span class="btn hotBBSTap">冬季</span>
                        </h5>
                        <span class="blogBBSCard-content">
                          说起来，夫妻过性生活是不分季节的。可是中医讲究“天人合一”，养生时应“合天时，顺地理”。四季的自然规律是“春天、夏长、秋收、冬藏”。因此，冬季养生的原则是“藏而不泄”，故古人早已有“冬季禁欲”之说，通俗地讲，冬季气候寒冷，人体需要许多能量来御寒，而性生活会消耗人较多的能量。在过性生活时，如果不掌握分寸，确实容易影响身体健康。
                          但是，现代人的生活条件比古人好得多，营养也更为丰富充足，身体也更为健康，而且在对待性的问题上思想也解放多了。因此，现代人的性要求要比古人强烈得多，性生活次数也更多。现代性医学专家研究也认为，有规律的性生活对人的健康有益。因此，在冬季进行适当的性生活还是必要的。不过，夫妻在冬季过性生活时也应注意保健。
                          适当控制性频率
                          当然，如何掌握性生活的频率，可因人而异。年富力强的，性交次数可多一些，而年老体弱，性交次数可少一些。有严重疾病的，应禁止性生活。自测的方法是：性生活次日，双方身心愉快，精力充沛，即说明性频率是合适的。如性生活次日，双方感到疲倦乏力，头昏眼花，甚至畏寒怕冷，这说明性生活频率不合适。总之，你自己的感觉是你最好的指导老师。
                          应注意预防感冒
                          冬季气候寒冷，如果夫妻赤身裸体地过性生活，最容易引起伤风感冒。一般症状还比较重，病程也较长，对身体有很长的危害。这种患者往往羞于到医院看病，自行购药，如果药不对症，感冒会拖得很久。因此，在冬季夫妻过性生活，一定要注意保暖防寒，避免感冒。
                          要避免酒后入房
                          在天寒地冷的冬季，许多人都喜欢利用喝酒来御寒。事实上，多喝一些酒，可以使皮肤血管扩张，血流量增加，使人有热烘烘的感觉。但这只是使人暂时消除了冷的感觉，并不是真正的御寒。如果酒后入房或以酒助性，那更是错上加错。自古以来医学们就告诫人们不要“醉以入房”。现代医学证明，酒精是一种性腺毒素，过量饮酒可使性腺中毒，血中睾丸酮水平低降70—80%，男子发生阳痿不育。
                        </span>
                        <span class="blogBBSCard-content"> </span>
                      </div>
                    </div>
                  </div>
                </a>
              </div>
            </div>
            <PageChange></PageChange>
          </section>
        </aside>
        <aside id="sidebar-right" class="col-lg-4">
          <div class="pl-0 pl-lg-5">
            <!-- Search Field -->
            <div id="search-field" class="sidebar-div mb-5">
              <div class="input-group my-3">
                <input
                  type="text"
                  class="form-control"
                  placeholder="搜索内容"
                  aria-label="Search"
                  aria-describedby="search-field"
                  v-model="searchTitleContent"
                />
              </div>
            </div>

            <!-- Blog Categories -->
            <div id="blog-cat" class="sidebar-div mb-4">
              <!-- Title -->
              <h5>热点</h5>

              <ul class="blog-category-list clearfix">
                <li>
                  <a href="#" title="">
                    <i class="lni-chevron-right" aria-hidden="true"></i
                    >医学著作</a
                  >
                  <span>(5)</span>
                </li>
                <li>
                  <a href="#" title=""
                    ><i class="lni-chevron-right" aria-hidden="true"> </i
                    >新冠热点</a
                  >
                  <span>(13)</span>
                </li>
                <li>
                  <a href="#" title=""
                    ><i class="lni-chevron-right" aria-hidden="true"> </i
                    >今日头条</a
                  >
                  <span>(6)</span>
                </li>
                <li>
                  <a href="#" title=""
                    ><i class="lni-chevron-right" aria-hidden="true"> </i
                    >公告</a
                  >
                  <span>(12)</span>
                </li>
              </ul>
            </div>

            <!-- Most Popular Posts -->
            <div id="popular-posts" class="sidebar-div mt-5">
              <!-- Title -->
              <h5 class="mb-2">热门讨论</h5>

              <ul class="popular-posts mt-4">
                <!-- Popular post #1 -->
                <li class="clearfix d-flex align-items-center">
                  <!-- Image -->
                  <img
                    class="img-fluid"
                    src="../../assets/img/22.jpg"
                    alt="blog-post-preview"
                  />

                  <!-- Text -->
                  <div class="post-summary">
                    <a href="blog-single-01.html" class="rose-hover"
                      >Etiam sapien accumsan molestie ante empor ...</a
                    >
                    <p>43 Comments</p>
                  </div>
                </li>

                <!-- Popular post #2 -->
                <li class="clearfix d-flex align-items-center">
                  <!-- Image -->
                  <img
                    class="img-fluid"
                    src="../../assets/img/23.jpg"
                    alt="blog-post-preview"
                  />

                  <!-- Text -->
                  <div class="post-summary">
                    <a href="blog-single-01.html" class="rose-hover"
                      >Blandit tempor sapien ipsum, porta justo ...</a
                    >
                    <p>38 Comments</p>
                  </div>
                </li>

                <!-- Popular post #3 -->
                <li class="clearfix d-flex align-items-center">
                  <!-- Image -->
                  <img
                    class="img-fluid"
                    src="../../assets/img/24.jpg"
                    alt="blog-post-preview"
                  />

                  <!-- Text -->
                  <div class="post-summary">
                    <a href="blog-single-01.html" class="rose-hover"
                      >Cursus risus laoreet turpis auctor varius ...</a
                    >
                    <p>29 Comments</p>
                  </div>
                </li>
              </ul>
            </div>

            <!-- Popular Tags -->
            <!-- <div id="popular-tags" class="sidebar-div mt-5">
              
              <h5 class="mt-4">热门标签</h5>

              <span class="badge"><a href="#">video</a> 3</span>
              <span class="badge"><a href="#">web</a> 17</span>
              <span class="badge"><a href="#">music</a> 2</span>
              <span class="badge"><a href="#">design</a> 54</span>
              <span class="badge"><a href="#">image</a> 46</span>
              <span class="badge"><a href="#">typography</a> 6</span>
              <span class="badge"><a href="#">journal</a> 9</span>
              <span class="badge"><a href="#">graphic</a> 32</span>
              <span class="badge"><a href="#">photo</a> 67</span>
              <span class="badge"><a href="#">photoshop</a> 26</span>
            </div> -->
          </div>
        </aside>
        <!-- END SIDEBAR RIGHT -->
      </div>
    </section>
  </div>
</template>

<script>
import $ from "jquery";
import axios from "axios";
import PageChange from "../../components/PageChange.vue";

export default {
  props: {
    searchTitleContent: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {
    axios
      .get(
        `http://81.68.255.101:8097/api/Askanswer/yangshenessaybytitle/question=生活/`
      )
      .then((respons) => {
        console.log(respons.data);
      });
  },
  methods: {
    searchByTitle() {
      axios
        .post(`http://81.68.255.101:8097/api/Askanswer/yangshenessaybylable/`, {
          lables: [""],
        })
        .then((respons) => {
          console.log(respons);
        });
    },
  },
  components: {
    PageChange,
  },
};
</script>

<style scoped>
#out {
  padding: 0 8%;
}
/* 轮播图修改 */
#BlogBBSHeader .carousel-control-prev,
#BlogBBSHeader .carousel-control-next {
  z-index: 100;
  background-color: transparent;
  border: none;
}

#BlogBBSHeader .hero-center {
  transform: none !important;
}
#BlogBBSHeader .carousel-indicators li {
  background-color: rgba(0, 0, 0, 0.5);
}
#BlogBBSHeader .carousel-control-next-icon,
#BlogBBSHeader .carousel-control-prev-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: 20px 20px;
  background-position: center center;
  opacity: 0.3;
  background-color: rgba(0, 0, 0, 0.3);
}
#BlogBBSHeader .carousel-control-next:hover .carousel-control-next-icon,
#BlogBBSHeader .carousel-control-prev:hover .carousel-control-prev-icon {
  opacity: 0.9;
  background-color: rgba(0, 0, 0, 0.3);
}

/* 头部 */
#BlogBBSHeader {
  background: #fff !important;
  height: 90vh;
}
#BlogBBSHeader .carousel-indicators li {
  border-radius: 12px;
}
#BlogBBSHeader .hero-txt {
  padding-left: 10%;
}
#BlogBBSHeader .hotBBSName {
  transform: translateX(-20px);
  color: #273c5f;
  font-size: 30px !important;
  padding-left: 5%;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#BlogBBSHeader .hotBBSTitle {
  margin-top: 20px;
  font-size: 15px;
  color: #273c5f;
  font-weight: bold;
}
#BlogBBSHeader .hotBBSContent {
  color: #747f9b;
  line-height: 1.3;

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
#BlogBBSHeader .hero-txt {
  padding: 0;
}
#BlogBBSHeader .hotBBSTap {
  font-size: 0.75rem;
  font-weight: normal;
  color: #222;
  border: none;
  background-color: #f0f0f0;
  border-radius: 6px;
  padding: 5px 10px;
  margin-left: 2px;
  transition: all 450ms ease-in-out;
  box-shadow: none;
}

#blogBBSBody {
  border-top: 2px solid #6159e6;
}
#blogBBSList {
  padding: 0 5%;
}
#blogBBSCard {
  /* border-radius: 10px; */
  padding: 5px;
  transition: all 0.5s ease-in-out;
}
#blogBBSCard:nth-child(n + 2) {
  border-top: 1px dashed #6159e6;
}
/* #blogBBSCard .blogBBSCard-image {
  padding-right: 0;
}
#blogBBSCard .blogBBSCard-image img {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
} */
#blogBBSCard .blogBBSCard-tap {
  margin-top: 10px;
}
#blogBBSCard .blogBBSCard-tap span {
  font-size: 0.75rem;
  font-weight: 600;
  color: #222;
  border: none;
  background-color: #f0f0f0;
  border-radius: 6px;
  padding: 5px 10px;
  margin-left: 2px;
  transition: all 450ms ease-in-out;
  box-shadow: none;
}
#blogBBSCard .blogBBSCard-title {
  font-size: 22px;
  line-height: 25px;
  font-weight: 700;
  color: #444;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#blogBBSCard .blogBBSCard-content {
  margin-top: 8px;
  font-size: 18px;
  color: #7e828a;
  font-weight: 500;
  line-height: 1.618;

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

#blogBBSBody #search-field .form-control {
  border-radius: 10px;
  box-shadow: none;
}
</style>
